<template>
    <h1>用户信息上传</h1>
    <div class="users">
        电话：<input type="text" :value="user.data.name1"/><br /><br />
        密码：<input type="text" :value="user.data.psd"/><br /><br />
        用户名：<input type="text" :value="user.data.username"/><br /><br />
        性别：<input type="text" :value="user.data.sex"/><br /><br />
        头像：<input type="file" @change="getBlob"/><br /><br />
        年龄：<input type="number" :value="user.data.age"/><br /><br />
        地址：<input type="text" :value="user.data.address"/><br /><br />
        简介：<input type="text" :value="user.data.content"/><br /><br />
        <br />
        <button @click="changeImg">提交</button>
    </div>
    
    <br />
    <h1>商品信息上传</h1>
    <div class="goods">
        名称：<input type="text" :value="goods.data.name2"/><br /><br />
        简介：<input type="text" :value="goods.data.content"/><br /><br />
        价格：<input type="text" :value="goods.data.price"/><br /><br />
        封面图片：<input type="text" :value="goods.data.coverImg"/><br /><br />
        配图：<input type="file" :value="goods.data.img"/>&nbsp;<button>确认上传</button><br /><br />
        分类：<input type="number" :value="goods.data.classes"/><br /><br />
        想要：<input type="text" :value="goods.data.want"/><br /><br />
        <br />
        <button>提交</button>
    </div>
    <h1>文章信息上传</h1>
    <div class="goods">
        名称：<input type="text" /><br /><br />
        简介：<input type="text" /><br /><br />
        分类：<input type="text" /><br /><br />
        是否关注了：<input type="text" /><span>值是关注或者推荐</span><br /><br />
        图片：<input type="file" />&nbsp;<button>确认上传</button><br /><br />
        封面：<input type="number" /><br /><br />
        浏览量：<input type="text" /><br /><br />
        点赞数：<input type="text" /><br /><br />
        <br />
        <button>提交</button>
    </div>
    
    </template>
    
    <script setup>
    import {ref, reactive} from "vue"
    
    const user = reactive({
        data:{
            name1:"",
            psd:"",
            username:"",
            sex:"",
            age:"",
            avatar:"",
            address:"",
            content:"",
            user:""
        }
    })
    
    const goods = reactive({
        data:{
            name2:"",
            content:"",
            price:"",
            coverImg:"",
            img:"",
            classes:"",
            want:"",
        }
    })
    
    const getBlob = (e)=>{
        const file = e.files[0]
        user.data.avatar = URL.createObjectURL(file)
    }
    const changeImg = ()=>{
        console.log(user.data)
    }
    </script>
    
    <style scoped>
        
    </style>
    